<template>
  <div id='CartBottomnav'>

    <div class="check">
      <div>
        <check-botton class="check-bg"></check-botton>
      </div>
      <div>全选</div>
    </div>

    <div class="total">合计：{{totalPrice}}</div>

    <div class="count">
      去结算({{count}})
    </div>

  </div>

</template>

<script>
  import CheckBotton from 'components/common/CheckBotton/CheckBotton.vue'
  export default {
    name: 'CartBottomnav',
    data() {
      return {}
    },
    components: { CheckBotton },
    methods: {},
    computed: {
      totalPrice() {
        return this.$store.state.cartlist.filter((item) => {
          return item.isCheck
        }).reduce((preValue, item) => {
          return preValue + item.price * item.counter
        }, 0).toFixed(2)
      },
      count() {
        return this.$store.state.cartlist.filter((item) => {
          return item.isCheck
        }).reduce((preValue, item) => {
          return preValue + item.counter
        }, 0)
      }
    }
  }
</script>

<style scoped>
  #CartBottomnav {
    position: absolute;
    display: flex;
    bottom: 49px;
    width: 100%;
    height: 30px;
    line-height: 30px;
  }

  .check {
    display: flex;
    flex: 0.3;
    align-items: center;
  }

  .check-bg {
    width: 20px;
  }

  .total {
    flex: 0.6;
  }

  .count {
    flex: 0.3;
    background-color: pink;
    text-align: center;
  }
</style>